<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task6</title>
    <link href="task6.css" rel="stylesheet"/>
</head>
<body>
<header>
    <div class="header-left">
        <label>ife.baidu.com</label>
    </div>
    <div class="header-right">
        <label>2016.03</label>
    </div>
</header>
<div class="main">
    <div class="top-pic-box">
        <div class="top-pic"><img src="img/top-pic.jpg"></div>
        <div class="top-pic-left"></div>
        <div class="top-pic-right"></div>
    </div>
    <div class="top-right">
        <label class="about-title">
            About
            Technologe
        </label><br/>
        <label class="about-desc">
            About technologe about technologe
            about technologe
        </label>
        <i class="about-number">
            700
        </i>
        <label class="about-css about-css-version">3.2</label>
        <label class="about-css about-css-desc">CSS</label>
        <label class="about-css about-css-detail">CSSCSSCSSCSSCSS</label>
    </div>
    <div class="artical-box-1">
        <div class="artical artical-1">
            <label class="artical-titile artical-1-title">What</label>

            <div class="artical-desc">
                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
            </div>
        </div>
        <div class="artical artical-2">
            <label class="artical-titile artical-2-title">When</label>

            <div class="artical-desc">
                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
            </div>
        </div>
        <div class="artical artical-3">
            <label class="artical-titile artical-3-title">How</label>

            <div class="artical-desc">
                前端前端前端前端前端前端前端前端前端前端前端前端
                <br/><br/>
                <label class="desc-percentage">What-------<i class="percentage-text">40%</i></label><br/>
                <label class="desc-percentage">What-------<i class="percentage-text">40%</i></label><br/>
                <label class="desc-percentage">What-------<i class="percentage-text">40%</i></label>
            </div>
        </div>
    </div>
    <div class="artical-box-2">
        <div class="artical artical-4">
            <div class="artical-4-title">
                <i>THE</i>
                THECKNOLOGE OF FRONT
                <br/>
                <label>前端技术领域</label>
            </div>
            <div class="artical-content">
                <label class="first-letter">前</label>

                <div>
                    端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                </div>
                <img class="artical-4-img">

                <p>
                    前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>

                <p>
                    前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                </p>
            </div>
        </div>
        <div class="artical artical-5">
            <div class="artical-5-img-box">
                <img class="artical-5-img" src="img/task-6.jpg">

                <div class="artical-5-img-title">
                    <label>前端技术</label>
                    <i>前端技术前端技术</i>
                </div>
            </div>
        </div>
        <div class="artical artical-6">
            <ul>
                <li><label><span class="list-style-rect"></span>前端前端前端前端前端前端...................<i>前端</i></label></li>
                <li><label><span class="list-style-rect"></span>前端前端前端前端...........................<i>前端</i></label>
                </li>
                <li><label><span class="list-style-rect"></span>前端前端前端前端前端前端前端...............<i>前端</i></label></li>
            </ul>
            <div class="artical-6-zero-box">
                <span class="zero">0</span>

                <div class="number">
                    <i>ONE TWO THREE FOUR FIVE</i>

                    <p>hello world hello world hello world</p>
                </div>
            </div>
            <div class="artical-6-desc">
                <div class="quotation quotation-left">“</div>
                    <i class="quote">
                        world hello world hello world hello world hello world hello world hello world hello world hello world hello world world hello
                    </i>
                <div class="quotation quotation-right">”</div>
            </div>
        </div>
    </div>
</div>
<footer>
    <span>ife.baidu.com</span>
</footer>
</body>
</html>